<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	    img{
	        position:absolute;
	        left:0px;
	        top:0px;
	    }
	</style>
	<body>
	<img src="shoot/2.png" alt="" id="pos0" style="display: none">
	<img src="shoot/2.png" alt="" id="pos1" style="display: none">
	<img src="shoot/2.png" alt="" id="pos2" style="display: none">
	<img src="shoot/2.png" alt="" id="pos3" style="display: none">
	<img src="shoot/2.png" alt="" id="pos4" style="display: none">
	
	<img src="shoot/1.gif" alt="" id="img">
	<script>
		var img = document.getElementById("img");
		document.onkeydown = function(e){
		    var e = window.event || e;
		    switch(e.keyCode){
		        case 37:
		            img.style.left = img.offsetLeft-10+"px";
		            break;
		        case 38:
		            img.style.top = img.offsetTop-10+"px";
		            break;
		        case 39:
		            img.style.left = img.offsetLeft+10+"px";
		            break;
		        case 40:
		            img.style.top = img.offsetTop+10+"px";
		            break;
		        case 32:   //space空格键发射子弹
		            game(img.offsetTop,img.offsetLeft+img.offsetWidth/2);
		            break;
		    }
		}
		function game(top,left){
		
		    for(var i=0;i<5;i++){
		        var pos = document.getElementById("pos"+i);
		        if(pos.style.display == "none"){
		           pos.style.display = "block";
		           pos.style.left = left+"px";
		           pos.style.top = top+"px";
		           break;
		        }
		    }
		}
		setInterval(function(){
		    for(var i=0;i<5;i++){
		        var pos = document.getElementById("pos"+i);
		        pos.style.top = pos.offsetTop-10+"px";
		        if(pos.offsetTop<-7){
		            pos.style.display = "none";
		        }
		
		    }
		},50);

	</script>
	</body>
</html>